<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" width="80%" destroy-on-close @closed="$emit('closed')" align-center>
        <el-container>
            <el-main>
                <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="110px" label-position="right" style="height:650px;overflow:auto">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="生产单号" prop="orderNo">
                                <el-input v-model="form.orderNo" placeholder="请输入生产单号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="订单号" prop="goods" required>
                                <el-input v-model="form.orderNo" placeholder="请出入订单号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="工厂货号" prop="specModel">
                                <el-input v-model="form.specModel" placeholder="请输入工厂货号"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="批次号" prop="orderNum">
                                <el-input v-model="form.orderNum" placeholder="请输入批次号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="skc" prop="produceNum" required>
                                <el-input v-model="form.orderNo" placeholder="请输入skc"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="商品款式" prop="goodsSpec">
                                <el-select v-model="form.goodsSpec" clearable style="width: 100%" placeholder="请选择">
                                    <el-option v-for="item in youXian" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="客户交期" prop="unit" required>
                                <el-date-picker v-model="form.deliver_date" :value-format="'YYYY-MM-DD'" style="width:100%" type="date" placeholder="请选择交期时间" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="客户名称" prop="overDate" required>
                                <el-select v-model="form.unit" clearable style="width: 100%" filterable placeholder="请选择">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="针种" prop="remark">
                                <el-select v-model="form.unit" clearable style="width: 100%" filterable placeholder="请选择">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="毛种" prop="goodsSpec">
                                <el-select v-model="form.goodsSpec" clearable style="width: 100%" placeholder="请选择">
                                    <el-option v-for="item in youXian" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="本厂大货跟单" prop="overDate" required>
                                <el-input v-model="form.remark" placeholder="请输入本厂大货跟单"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="备注" prop="remark">
                                <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 订单明细 -->
                    <el-col :span="24">
                        <el-form-item label="订单明细" prop="size_data">
                            <sc-form-table ref="table" v-model="form.size_data" :addTemplate="addTemplate" placeholder="暂无数据" hideAdd hideDelete>
                                <el-table-column prop="size" label="尺码" width="180"></el-table-column>
                                <el-table-column prop="num" label="数量" min-width="180"></el-table-column>
                                <el-table-column prop="num" label="计划生产数" min-width="180">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.num" placeholder="请输入计划生产数"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="num" label="生产克重/G" min-width="180">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.num" placeholder="请输入生产克重"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="num" label="生产总重量/KG" min-width="180">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.num" placeholder="请输入生产总重量"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="num" label="备注" min-width="180">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.num" placeholder="请输入备注"></el-input>
                                    </template>
                                </el-table-column>
                            </sc-form-table>
                        </el-form-item>
                    </el-col>
                    <!-- 配毛 -->
                    <el-col :span="24">
                        <el-form-item label="配毛" prop="material_data">
                            <sc-form-table ref="table" v-model="form.material_data" :addTemplate="material" placeholder="暂无数据">
                                <el-table-column width="65">
                                    <template #default="scope">
                                        <el-button type="primary" size="small" icon="el-icon-search" @click="openWu(scope.row,scope.$index)"></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="material_code" label="物料SKC">
                                    <template #default="scope">
                                        <div>{{scope.row.material_code}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="category_name" label="物料类别">
                                    <template #default="scope">
                                        <div>{{scope.row.category_name}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="material_name" label="物料名称">
                                    <template #default="scope">
                                        <div>{{scope.row.material_name}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="color_number" label="色号">
                                    <template #default="scope">
                                        <div>{{scope.row.color_number}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="colour" label="颜色">
                                    <template #default="scope">
                                        <div v-if="scope.row.colour">{{scope.row.colour}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="image" label="图片">
                                    <template #default="scope">
                                        <el-image style="width:50px;height:50px" :src="scope.row.image" :preview-src-list="scope.row.image" :initial-index="0" fit="cover" preview-teleported="true" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="apply_name" label="供应商">
                                    <template #default="scope">
                                        <div>{{scope.row.apply_name}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="remark" label="备注">
                                    <template #default="scope">
                                        <div v-if="scope.row.remark">{{scope.row.remark}}</div>
                                    </template>
                                </el-table-column>
                            </sc-form-table>
                        </el-form-item>
                    </el-col>
                    <!-- 工序 -->
                    <el-col :span="24">
                        <el-form-item label="工序信息" prop="process_data">
                            <sc-form-table ref="table" v-model="form.process_data" :addTemplate="process" placeholder="暂无数据">
                                <el-table-column width="65">
                                    <template #default="scope">
                                        <el-button type="primary" size="small" icon="el-icon-search" @click="openGong(scope.row,scope.$index)"></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="process_id" label="一级工序" align="center">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.process_id" @change="changeGong(scope.row)" placeholder="请选择">
                                            <el-option v-for="item in processList" :key="item.id" :label="item.title" :value="item.id"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="GongxuSon" label="二级工序" align="center">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.two_process_id" placeholder="请选择">
                                            <el-option v-for="item in scope.row.GongxuSon" :key="item.id" :label="item.title" :value="item.id"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="price" label="工序单价" align="center">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.price" placeholder="请输入工序单价"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="staff_id" label="选择员工">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.staff_id" placeholder="请选择">
                                            <el-option v-for="item in staffList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="sort" label="排序">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.sort"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="remark" label="工序备注">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.remark"></el-input>
                                    </template>
                                </el-table-column>
                            </sc-form-table>
                        </el-form-item>
                    </el-col>
                    <!-- 辅料 -->
                    <el-col :span="24">
                        <el-form-item label="辅料" prop="material_data">
                            <sc-form-table ref="table" v-model="form.material_data" :addTemplate="material" placeholder="暂无数据">
                                <el-table-column width="65">
                                    <template #default="scope">
                                        <el-button type="primary" size="small" icon="el-icon-search" @click="openWu(scope.row,scope.$index)"></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="material_code" label="物料SKC">
                                    <template #default="scope">
                                        <div>{{scope.row.material_code}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="category_name" label="物料类别">
                                    <template #default="scope">
                                        <div>{{scope.row.category_name}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="material_name" label="物料名称">
                                    <template #default="scope">
                                        <div>{{scope.row.material_name}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="color_number" label="色号">
                                    <template #default="scope">
                                        <div>{{scope.row.color_number}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="colour" label="颜色">
                                    <template #default="scope">
                                        <div v-if="scope.row.colour">{{scope.row.colour}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="image" label="图片">
                                    <template #default="scope">
                                        <el-image style="width:50px;height:50px" :src="scope.row.image" :preview-src-list="scope.row.image" :initial-index="0" fit="cover" preview-teleported="true" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="apply_name" label="供应商">
                                    <template #default="scope">
                                        <div>{{scope.row.apply_name}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="remark" label="备注">
                                    <template #default="scope">
                                        <div v-if="scope.row.remark">{{scope.row.remark}}</div>
                                    </template>
                                </el-table-column>
                            </sc-form-table>
                        </el-form-item>
                    </el-col>
                    <!-- 尺寸 -->
                    <el-col :span="24">
                        <el-form-item label="尺寸" prop="material_data">
                            <sc-form-table ref="table" v-model="form.material_data" hideAdd hideDelete>
                                <el-table-column width="65">
                                    <template #default="scope">
                                        <el-button type="primary" size="small" icon="el-icon-search" @click="openWu(scope.row,scope.$index)"></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="material_code" label="物料SKC">
                                    <template #default="scope">
                                        <div>{{scope.row.material_code}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="category_name" label="物料类别">
                                    <template #default="scope">
                                        <div>{{scope.row.category_name}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="material_name" label="物料名称">
                                    <template #default="scope">
                                        <div>{{scope.row.material_name}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="color_number" label="色号">
                                    <template #default="scope">
                                        <div>{{scope.row.color_number}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="colour" label="颜色">
                                    <template #default="scope">
                                        <div v-if="scope.row.colour">{{scope.row.colour}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="image" label="图片">
                                    <template #default="scope">
                                        <el-image style="width:50px;height:50px" :src="scope.row.image" :preview-src-list="scope.row.image" :initial-index="0" fit="cover" preview-teleported="true" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="apply_name" label="供应商">
                                    <template #default="scope">
                                        <div>{{scope.row.apply_name}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="remark" label="备注">
                                    <template #default="scope">
                                        <div v-if="scope.row.remark">{{scope.row.remark}}</div>
                                    </template>
                                </el-table-column>
                            </sc-form-table>
                        </el-form-item>
                    </el-col>
                    <el-row :gutter="1">
                        <el-col :span="8">
                            <el-form-item label="吓数文件">
                                <sc-upload-file v-model="form.ziliao_url" :limit="3">
                                    <el-button type="primary" icon="el-icon-upload">吓数文件下载</el-button>
                                </sc-upload-file>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="画花文件">
                                <sc-upload-file v-model="form.ziliao_url" :limit="3">
                                    <el-button type="primary" icon="el-icon-upload">画花文件下载</el-button>
                                </sc-upload-file>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-main>
            <el-footer>
                <div style="display:flex;justify-content: end;">
                    <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保存并审核</el-button>
                    <el-button :loading="isSaveing" @click="submit()">保存</el-button>
                    <el-button @click="visible=false" >取消</el-button>
                </div>
            </el-footer>
        </el-container>
        <wu v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></wu>
        <gong v-if="dialog.gong" ref="gongDialog" @success="gongSuccess" @closed="dialog.gong = false" draggable></gong>
	</el-dialog>
</template>

<script>
import Gong from './gong'
import wu from './wu'
	export default {
        components: { wu,Gong },
		emits: ['success', 'closed'],
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '新增生产任务',
					edit: '修改生产任务',
					show: '查看'
				},
                dialog: {
				    save: false,
                    gong:false
			    },
				visible: false,
				isSaveing: false,
                grade:"潜力",
				//表单数据
				form: {
					id:"",
					remark: "",
                    overData: "",
                    goodsSpec: "",
                    unit: "",
                    produceNum: "",
                    specModel: "",
                    goods: "",
                    orderNo: "",
                    name:"",
                    list:[]
				},
                addTemplate:{
                    id:'',
                    name:'',
                    desc:'',
                    use:'',
                    number:'',
                    price:'',
                    remark:'',
                },
				//验证规则
				rules: {
					apply_name: [
						{required: true, message: '请输入名称'}
					],
					mobile: [
						{required: true, message: '请输入联系方式'}
					],
                    linkman: [
						{required: true, message: '请输入联系人'}
					],
                    referred_as: [
						{required: true, message: '请输入检查'}
					],
					tax_identification_no: [
						{required: true, message: '请输入税号'}
					],
                    settlement_way: [
						{required: true, message: '请选择结算方式'}
					],
                    system_disable: [
						{required: true, message: '请选择是否禁用'}
					],
                    address: [
						{required: true, message: '请输入联系地址'}
					],
				},
				cates: [],  //品牌
                Settlement:[],//结算方式
                muDan:[
                    {id:0,name:'否'},
                    {id:1,name:'是'},
                ],
			}
		},
		mounted() {
            this.getCate()
            this.getSettlement()
		},
		methods: {
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res  = [];
						if (this.form.id) {
							res = await this.$API.customer.getCustomerList.edit.post(this.form);
						}else{
							res = await this.$API.customer.getCustomerList.add.post(this.form);
						}
						this.isSaveing = false;
						if(res.code == 1){
							this.$emit('success', this.form, this.mode)
							this.visible = false;
							this.$message.success("操作成功")
						}else{
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}else{
						return false;
					}
				})
			},
			//表单注入数据
			setData(data){
				Object.assign(this.form, data)
			},
            // 获取品牌
            async getCate(){
				var res = await this.$API.customer.getBrand.lists.get();
				this.cates = res.data.rows;
			},
            // 获取结算方式
            async getSettlement(){
				var res = await this.$API.customer.getSettlement.get();
				this.Settlement = res.data;
			},
		}
	}
</script>

<style lang="scss">
.el-form-item--default{
    align-items: center;
}
#el-dialog__footer{
    position: absolute;
    right: 20px;
    bottom: 20px;
}
</style>
